<template>
  <div class="step2-form-half">
    <a-form-item
      :label="'4. ' + $t('breach.steps.step2.business.form.where')"
      v-if="breachMode === 1"
      class="select-from"
    >
      <a-checkbox-group
        v-decorator="['SupplementInternalSystems']"
        @change="(value) => (fromList = value)"
        :disabled="!ifCanEdit"
      >
        <div class="inner">
          <a-checkbox value="inner">{{
            $t("breach.steps.step2.business.form.where.inside")
          }}</a-checkbox>
          <select-user-list
            v-show="fromList.includes('inner')"
            :ifSystem="true"
            :dataSource="childItem.innerList"
            :disabled="!ifCanEdit"
            :initUserList="initUserList"
            @updateData="(...rest) => updateData('innerList', ...rest)"
          />
        </div>
        <div class="outer">
          <a-checkbox value="outer">{{
            $t("breach.steps.step2.business.form.where.three")
          }}</a-checkbox>
          <a-table
            size="small"
            :data-source="outerList"
            bordered
            :pagination="false"
            v-show="fromList.includes('outer')"
          >
            <a-table-column key="No" title="No" align="center">
              <template slot-scope="text, record, ind">
                {{ ind + 1 }}
              </template>
            </a-table-column>
            <a-table-column
              key="SupplementDetailName"
              :title="$t('breach.steps.step2.business.form.where.three.name')"
              align="center"
            >
              <template slot-scope="text, record">
                <a-input
                  :disabled="!ifCanEdit"
                  v-model="record.SupplementDetailName"
                  :placeholder="
                    $t(
                      'breach.steps.step2.business.form.where.three.name.placeholder'
                    )
                  "
                />
              </template>
            </a-table-column>
            <a-table-column
              key="SupplementDetailThirdContacts"
              :title="$t('breach.steps.step2.business.form.call.user')"
              align="center"
            >
              <template slot-scope="text, record">
                <a-input
                  :disabled="!ifCanEdit"
                  v-model="record.SupplementDetailThirdContacts"
                  :placeholder="$t('breach.steps.step1.content.form.tip')"
                />
              </template>
            </a-table-column>
            <a-table-column
              key="SupplementDetailPhone"
              :title="$t('breach.steps.step2.business.form.where.three.phone')"
              align="center"
            >
              <template slot-scope="text, record">
                <a-input
                  :disabled="!ifCanEdit"
                  v-model="record.SupplementDetailPhone"
                  :placeholder="$t('breach.steps.step1.content.form.tip')"
                />
              </template>
            </a-table-column>
            <a-table-column
              key="SupplementDetailEmail"
              :title="$t('breach.steps.step2.business.form.call.email')"
              align="center"
            >
              <template slot-scope="text, record">
                <a-input
                  :disabled="!ifCanEdit"
                  v-model="record.SupplementDetailEmail"
                  :placeholder="$t('breach.steps.step1.content.form.tip')"
                />
              </template>
            </a-table-column>
            <a-table-column
              key="SupplementDetailRemark"
              :title="$t('breach.steps.step2.business.form.call.remark')"
              align="center"
            >
              <template slot-scope="text, record">
                <a-input
                  :disabled="!ifCanEdit"
                  v-model="record.SupplementDetailRemark"
                  :placeholder="$t('breach.steps.step1.content.form.tip')"
                />
              </template>
            </a-table-column>
            <a-table-column
              key="operate"
              :title="$t('di.menus')"
              align="center"
            >
              <template slot-scope="text, record">
                <a-button
                  type="link"
                  :disabled="!ifCanEdit"
                  @click="delRow(record.Id)"
                  >{{ $t("app.setting.copy") }}</a-button
                >
              </template>
            </a-table-column>
          </a-table>
          <a-button
            icon="plus"
            @click="outerList.push({ Id: +new Date() })"
            v-show="fromList.includes('outer')"
            :disabled="!ifCanEdit"
            >{{ $t("breach.steps.step2.business.form.type.add") }}</a-button
          >
        </div>
        <div class="other">
          <a-checkbox value="other">{{
            $t("breach.steps.step2.business.form.where.other")
          }}</a-checkbox>
          <a-textarea
            :placeholder="
              $t('breach.steps.step2.business.form.describe.placeholder')
            "
            rows="4"
            v-show="fromList.includes('other')"
            v-decorator="['SupplementInternalSystemsOther']"
            :disabled="!ifCanEdit"
          >
          </a-textarea>
        </div>
      </a-checkbox-group>
    </a-form-item>
    <a-form-item :label="'5. ' + $t('breach.steps.step2.business.form.call')">
      <select-user-list
        :initUserList="initUserList"
        :dataSource="childItem.userList"
        :disabled="!ifCanEdit"
        @updateData="(...rest) => updateData('userList', ...rest)"
      />
    </a-form-item>
    <a-row :gutter="24">
      <a-col :span="12">
        <label class="real-label">
          <span>6. {{ $t("breach.steps.step2.business.form.number") }}:</span>
          <a-input-number
            :value="childItem.SupplementNumber"
            :min="0"
            :placeholder="
              $t('breach.steps.step2.business.form.number.placeholder')
            "
            @change="(value) => $emit('changeItem', 'SupplementNumber', value)"
            :disabled="!ifCanEdit"
          />
        </label>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import selectUserList from "@/components/selectUserList/index.vue";
import uploadFile from "@/components/uploadFile/index.vue";
export default {
  name: "step2FormHalf",
  components: { selectUserList, uploadFile },
  props: ["item", "ifCanEdit", "breachMode", "breachDetail", "form"],
  data() {
    return {
      fromList: [],
      outerList: [],
      childItem: {},
      initUserList: [],
    };
  },
  watch: {
    item: {
      handler(newVal) {
        // 回显人员相关lists
        this.childItem = { ...newVal };
        this.fromList = [...newVal.SupplementInternalSystems];
        if (this.form.getFieldValue("SupplementInternalSystems")) {
          this.fromList = [
            ...this.fromList,
            ...this.form.getFieldValue("SupplementInternalSystems"),
          ];
        }
        let lists = {
          SupplementThird: "outerList",
          SupplementInside: "innerList",
          SupplementBmw: "userList",
        };
        for (const element in lists) {
          if (Object.hasOwnProperty.call(lists, element)) {
            if (element === "SupplementThird") {
              this.outerList = newVal[element] || [];
            } else {
              let templist = [];
              newVal[element] &&
                newVal[element].forEach((item) => {
                  if (
                    item.Id < 1000000 &&
                    item.SupplementDetailContacts &&
                    !templist.filter(
                      (item) => item.value === item.SupplementDetailContacts
                    ).length
                  ) {
                    templist.push({
                      label: item.SupplementDetailContactsStr,
                      value: item.SupplementDetailContacts,
                    });
                  }
                });
              // 去重 防止更新人员报错
              templist.forEach((item) => {
                let keyMap = this.initUserList.map((item) => item.label);
                let valueMap = this.initUserList.map((item) => item.value);
                if (
                  !valueMap.includes(item.value) &&
                  !keyMap.includes(item.label)
                ) {
                  this.initUserList.push(item);
                }
              });
              this.childItem = {
                ...this.childItem,
                [lists[element]]: newVal[element],
              };
            }
          }
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    updateData(key, value) {
      this.$emit("changeItem", key, value);
    },
    delRow(Id) {
      this.outerList = this.outerList.filter((item) => item.Id !== Id);
    },
    getAllLists() {
      let resMap = [];
      if (this.item.innerList) {
        resMap = [
          ...resMap,
          ...this.item.innerList.map((item) => {
            return {
              DetailId: item.Id > 1000000 ? undefined : item.Id,
              ...item,
              Id: undefined,
              SupplementDetailContacts:
                typeof item.SupplementDetailContacts === "string"
                  ? item.SupplementDetailContacts
                  : item.SupplementDetailContactsStr,
              SupplementDetailType: 1,
            };
          }),
        ];
      }
      if (this.outerList) {
        resMap = [
          ...resMap,
          ...this.outerList.map((item) => {
            return {
              DetailId: item.Id > 1000000 ? undefined : item.Id,
              ...item,
              Id: undefined,
              SupplementDetailContacts:
                typeof item.SupplementDetailContacts === "string"
                  ? item.SupplementDetailContacts
                  : item.SupplementDetailContactsStr,
              SupplementDetailType: 2,
            };
          }),
        ];
      }
      if (this.item.userList) {
        resMap = [
          ...resMap,
          ...this.item.userList.map((item) => {
            return {
              DetailId: item.Id > 1000000 ? undefined : item.Id,
              ...item,
              Id: undefined,
              SupplementDetailContacts:
                typeof item.SupplementDetailContacts === "string"
                  ? item.SupplementDetailContacts
                  : item.SupplementDetailContactsStr,
              SupplementDetailType: 3,
            };
          }),
        ];
      }
      return resMap;
    },
  },
};
</script>

<style>
</style>